<template>
  <div class="status_container" ref="messageContainer">
    <!-- 在线客服状态 -->
    <!-- 正在为您连接客服 ... -->
    <div class="status1">正在为您连接客服 ...</div>
    <!-- 暂无客服在线 ... -->
    <div class="status2">暂无客服在线 ...</div>
    <div v-for="(message, index) in chatList" :key="index" style="width: 100%">
      <!-- 发送文字 -->
      <div v-if="message.role === 'user' && message.msg" class="text-to">
        <div class="content-send">
          <div class="time">20:12</div>
          <p class="send-text message-bubble">{{ message.msg }}</p>
        </div>
        <!-- 用户头像 -->
        <van-image
          class="head-img"
          src="https://img0.baidu.com/it/u=2654292087,2022099598&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
        />
      </div>
      <!-- 发送图片 -->
      <div v-if="message.role === 'user' && message.imgurl" class="text-to">
        <div class="content-send">
          <div class="time">20:12</div>
          <van-image
            class="send-image"
            fit="contain"
            src="https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/popular_3.jpg"
          />
        </div>
        <!-- 用户头像 -->
        <van-image
          class="head-img"
          src="https://img0.baidu.com/it/u=2654292087,2022099598&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"
        />
      </div>
      <!-- 文件消息 -->
      <!-- <div v-else-if="msg.msgType === 'file'" 
                class="file-message"
                @click="downloadFile(msg.content)">
            <van-icon name="description" class="file-icon" />
            <span class="file-name">{{ msg.fileName }}</span>
          </div> -->
      <!-- ai文字 -->
      <div v-if="message.role === 'AI' && message.msg" class="get-to">
        <!-- ai头像 -->
        <van-image
          class="head-img"
          fit="cover"
          position="center"
          src="https://img1.baidu.com/it/u=1682636682,2107335110&fm=253&fmt=auto&app=138&f=JPEG?w=1422&h=800"
        />
        <div class="content-get">
          <div class="time">20:12</div>
          <p class="get-text">
            {{ message.msg }}
          </p>
        </div>
      </div>
      <!-- ai图片 -->
      <div v-if="message.role === 'AI' && message.imgurl" class="get-to">
        <!-- ai头像 -->
        <van-image
          class="head-img"
          fit="cover"
          position="center"
          src="https://img1.baidu.com/it/u=1682636682,2107335110&fm=253&fmt=auto&app=138&f=JPEG?w=1422&h=800"
        />
        <div class="content-get">
          <div class="time">20:12</div>
          <van-image class="send-image" :src="message.imgurl" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, nextTick, watch } from 'vue'
import { chatListStore } from '@/stores/chatMsg'
const { chatList } = chatListStore()

//滚动到底部
const messageContainer = ref<HTMLDivElement | null>(null)
const scrollToBottom = () => {
  // console.log('滚动到底部')
  if (messageContainer.value) {
    messageContainer.value.scrollTop = messageContainer.value.scrollHeight
  }
}
watch(
  chatList,
  () => {
    // console.log('chatListLength:', newVal)
    // 使用 nextTick 确保 DOM 更新完成后再滚动
    nextTick(() => {
      scrollToBottom()
    })
  },
  { immediate: true, deep: true } // 立即监听，已进入页面就开始，深度监听，确保数组内容变化也能触发
)
</script>
<style scoped lang='scss'>
@import '@/style/statusCon.css';
.status_container {
  width: 100vw;
  height: 80vh;
  // padding-top: 200px;
  display: flex;
  flex-direction: column;
  // justify-content: center;
  align-items: center;
  padding: 0 13px 60px 10px;
  overflow-y: auto;
  background-color: #f5f5f5;
}
.status1,
.status2 {
  padding: 3px 0;
  margin: 10px 0;
  width: 65vw;
  border-radius: 6px;
  background: #eeeeee;
  text-align: center;
}
.status1 {
  margin-top: 20px;
}
.status2 {
  color: red;
}
</style>